<!--  -->
<template>
    <div class="wrapper-header1" :style="{gridTemplateColumns: grid}">
        <img src="../../../assets/images/LOGO_FF14.png" alt="">
        <div class="ap"></div>
        <div class="ap" :style="{fontSize: fS}" v-for="(item, index) in contain" :key="index">{{ item }}</div>
        <div class="sp1">
            <div class="sp2">
                <svg width="26" height="26" viewBox="0 0 1024 1024">
                    <path
                        d="M744.758 704.861l143.275 143.25c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-143.686-143.691c16.388-13.702 31.662-28.692 45.666-44.814zM442.667 85.333c197.35 0 357.333 159.984 357.333 357.333 0 88.502-32.174 169.489-85.464 231.903v0l-0.944 1.101c-2.851 3.312-5.762 6.571-8.731 9.776l9.674-10.877c-3.963 4.641-8.042 9.179-12.233 13.61-2.5 2.643-5.032 5.239-7.602 7.796-0.895 0.89-1.782 1.764-2.674 2.633-2.996 2.92-6.063 5.806-9.18 8.637-1.208 1.097-2.431 2.193-3.663 3.282-2.857 2.525-5.744 4.995-8.67 7.419-0.589 0.488-1.169 0.965-1.75 1.441-61.596 50.386-140.317 80.613-226.098 80.613-197.35 0-357.333-159.984-357.333-357.333s159.984-357.333 357.333-357.333zM442.667 149.333c-162.004 0-293.333 131.33-293.333 293.333s131.33 293.333 293.333 293.333c162.004 0 293.333-131.33 293.333-293.333s-131.33-293.333-293.333-293.333z"
                        fill="rgba(0,0,0,0.6)"></path>
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {

        };
    },
    props: {
        'contain': {
            type: Array,
            default: () => {
                return [
                    "华为",
                    "鸿蒙智选",
                    "华为智选",
                    "生态周边"
                ]
            }
        },
        'fS': {
            type: String,
            default: '16px'
        },
        'grid': {
            type: String,
            default: '1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 7fr'
        }
    },
    computed: {},
    watch: {},
    methods: {

    },
    created() {

    },
    mounted() {

    },
}
</script>
<style lang='scss' scoped>
.wrapper-header1 {
    padding-left: 11%;
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr 1.5fr 1.5fr 7fr;
    align-items: center;
    justify-content: space-between;
    img {
        width: 197px;
        height: 145px;
        position: fixed;
        left: 0;
        top: 50px;
        transform: scale(1.2);
        z-index: 100;
    }
    
    .ap {
        font-weight: 800;
    }
    
    img:hover {
        cursor: pointer;
    }

    .ap:hover {
        filter: brightness(1.2);
        color: #c03332;
        cursor: pointer;
    }

    .sp1 {
        width: 100%;
        position: relative;

        .sp2 {
            width: 26px;
            height: 26px;
            float: right;
            margin-right: 30%;
        }

        .sp2:hover {
            cursor: pointer;
        }

        .sp2:hover svg path {
            fill: black;
        }
    }
}
</style>
